<template>
    <div class="life_body">
        <Row style="display: inline-block; height: 87vh; user-select: none;">
            <Menu style="font-size: 15px;">
                <Submenu name="1">
                    <template #title>
                        <div @click="navigateTo('life_text', { id: 0 })" style="display: inline-block; width: 100%;">
                            <Icon type="ios-paper" /> &nbsp; 总类
                        </div>
                    </template>
                    <MenuItem name="6" @click="navigateTo('life_text', { id: 1 })">随笔</MenuItem>
                    <MenuItem name="7" @click="navigateTo('life_text', { id: 2 })">生活</MenuItem>
                    <MenuItem name="8" @click="navigateTo('life_text', { id: 4 })">美食</MenuItem>
                    <MenuItem name="9" @click="navigateTo('life_text', { id: 3 })">日记</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template #title>
                        <div @click="navigateTo('memory_self')" style="display: inline-block; width: 100%;">
                            <Icon type="ios-people" /> &nbsp; 记录管理
                        </div>
                    </template>
                    <MenuItem name="2-1" @click="navigateTo('memory_self')">记录生活</MenuItem>
                    <MenuItem name="2-2" @click="navigateTo('memory_self', { id: 0 })">修改/删除记录</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template #title>
                        <div @click="navigateTo('anaysis_self', { id: 0 })" style="display: inline-block; width: 100%;">
                            <Icon type="ios-stats" /> &nbsp; 生活分析
                        </div>
                    </template>
                    <MenuGroup title="趋势">
                        <MenuItem name="3-1" @click="navigateTo('anaysis_self', { id: 1 })">时长</MenuItem>
                        <MenuItem name="3-2" @click="navigateTo('anaysis_self', { id: 2 })">活跃分析</MenuItem>
                        <!-- <MenuItem name="3-3" @click="navigateTo('anaysis_self', { id: 3 })">历史活跃</MenuItem> -->
                    </MenuGroup>
                    <MenuGroup title="记录">
                        <MenuItem name="3-4" @click="navigateTo('anaysis_self', { id: 4 })">记录分析</MenuItem>
                        <!-- <MenuItem name="3-5" @click="navigateTo('anaysis_self', { id: 5 })">习惯分析</MenuItem> -->
                    </MenuGroup>
                </Submenu>
            </Menu>
        </Row>

        <div class="life_body_display">
            <RouterView :key="random_key()" />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref,inject } from 'vue';
import { RouterView, useRouter } from 'vue-router';
import { get_life_data } from '../../api/life.js';


const user = inject('user')()
const router_ = useRouter();

function random_key() {
    return Math.random().toString(36).substr(2, 9);
}

// 统一路由跳转函数
function navigateTo(routeName, query = {}) {
    router_.push({ name: routeName, query });
}

onMounted(async () => {
    if (user.value.get_user_life_data() == undefined) {
       user.value.set_user_life_data(await get_life_data(user.value.get_user().id, 1));
    }
});
</script>

<style scoped>
.life_body {
    height: 88vh;
    vertical-align: top;
    padding-top: 80px;
}

.life_body_display {
    display: inline-block;
    height: 87vh;
    width: 80vw;
    vertical-align: top;
    margin: 5px 5px 0 20px;
    position: absolute;
    font-size: 18px;
    padding: 5px;
    overflow: scroll;
}

::-webkit-scrollbar {
    display: none;
}
</style>